<template>
  <el-dialog :close-on-click-modal="false" title="添加宝贝" :visible.sync="visible" width="52.5%" :before-close=" handleClose">
    <div class="shopModal">
      <el-tabs v-model="activeName" @tab-click="(e)=>{handleClick(e)}">
        <el-tab-pane label="添加模板" name="template">
          <add-template :current="template_current" @changeCurrent="handleChange" />
        </el-tab-pane>
        <el-tab-pane label="添加组件" name="component">
          <add-primate types="组件" :current="component_current" @changeCurrent="handleChange" />
        </el-tab-pane>
        <el-tab-pane label="添加图片" name="pictrue">
          <add-primate types="图片" :current="picture_current" @changeCurrent="handleChange" />
        </el-tab-pane>
        <el-tab-pane label="添加图标" name="icon">
          <add-primate types="图标" :current="icon_current" @changeCurrent="handleChange" />
        </el-tab-pane>
        <el-tab-pane label="添加SDK" name="sdk">
          <add-primate types="sdk" :current="sdk_current" @changeCurrent="handleChange" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script>
import AddPrimate from './addDetail/addPrimate';
import AddTemplate from './addDetail/addTemplate';
import { mapState, mapMutations } from 'vuex';
export default {
  name: '',
  components: {
    AddPrimate,
    AddTemplate,
  },
  computed: {
    ...mapState({
      visible: state => state.shop.visible
    })
  },
  data () {
    return {
      activeName: 'template',
      template_current: 1,
      component_current: 1,
      picture_current: 1,
      icon_current: 1,
      sdk_current: 1
    };
  },
  methods: {
    ...mapMutations({
      handleVisible: 'saveVisible'
    }),
    handleClick (e) {
      console.log(e,'handleClickhandleClick')
    },
    handleClose(){
      this.handleVisible({visible: false});
      this.activeName='template';
    },
    handleChange({ type, current }){
      switch(type){
        case '模板':
          this.template_current = current;
          break;
        case '组件':
          this.component_current = current;
          break;
        case '图片':
          this.picture_current = current;
          break;
        case '图标':
          this.icon_current = current;
          break;
        case 'sdk':
          this.sdk_current = current;
          break;
      }
    }
  },
}
</script>